<template>
  <el-dialog
    v-model="visible"
    title="教师详情"
    width="60%"
    top="8vh"
    class="teacher-detail-dialog"
  >
  <el-tabs v-model="activeName">
    <el-tab-pane label="基本信息" name="basic">
      <div class="teacher-detail-container">
        <!-- 基本信息区 -->
        <div class="basic-info">
          <el-avatar :size="100" :src="teacherData.avatar" class="teacher-avatar" />
          <div class="name-and-status">
            <h2>{{ teacherData.teacherName }}</h2>
            <el-tag 
              :type="teacherData.status == 1 ? 'success' : 'info'"
              size="large"
              class="status-tag"
            >
              {{ teacherData.status == 1 ? '在职' : '离职' }}
            </el-tag>
          </div>
        </div>

        <!-- 详细信息区 -->
        <div class="detail-info">
          <el-descriptions :column="2" border class="info-descriptions">
            <el-descriptions-item label="性别" label-class-name="description-label">
              <span class="description-value">{{ teacherData.gender == 1 ? '男' : '女' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="年龄" label-class-name="description-label">
              <span class="description-value">{{ teacherData.age }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="联系方式" label-class-name="description-label">
              <span class="description-value">{{ teacherData.phone }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="电子邮箱" label-class-name="description-label">
              <span class="description-value">{{ teacherData.email }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="专长乐器" label-class-name="description-label">
              <div class="instrument-tags">
                <el-tag 
                  v-for="inst in teacherData.instruments" 
                  :key="inst" 
                  class="instrument-tag"
                >
                  {{ formatInstrument(inst) }}
                </el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="教学级别" label-class-name="description-label">
              <span class="description-value">
                {{ 
                  teacherData.level == 1 ? '初级教师' : 
                  teacherData.level == 2 ? '中级教师' : 
                  teacherData.level == 3 ? '高级教师' : '特级教师' 
                }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="入职日期" label-class-name="description-label">
              <span class="description-value">{{ parseISODateTime(teacherData.joinDate, {includeTime: false}) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址" label-class-name="description-label">
              <span class="description-value">{{ teacherData.address }}</span>
            </el-descriptions-item>
          </el-descriptions>

          <!-- 教师简介 -->
          <div class="teacher-description">
            <h3>教师简介</h3>
            <div class="description-content">
              {{ teacherData.description || '暂无简介' }}
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <!-- 课程记录 -->
    <el-tab-pane label="课程记录" name="courses">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchForm.date"
            type="daterange"
            placeholder="选择日期"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px;"
            value-format="YYYY-MM-DDTHH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCourseRecords">查询</el-button>
          <el-button type="default" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="courseRecords" style="width: 100%">
        <el-table-column prop="schoolTime" label="日期" width="180" sortable />
        <el-table-column prop="courseName" label="课程名称" />
        <el-table-column prop="teacherName" label="教师" width="130" />
        <el-table-column prop="studentName" label="学生" />
      </el-table>
      <el-pagination 
        style="margin-top: 20px;" 
        :current-page="searchForm.page"
        :page-size="searchForm.pageSize"
        :page-sizes="[5, 10, 20, 30]"
        :total="searchForm.total" 
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-tab-pane>
  </el-tabs>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import {parseISODateTime} from '@/utils/dateUtils'
import { getCourseRecordsByTeacherId } from '@/api/courseRecord'


const courseRecords = ref([])

const searchForm = reactive({
  date: [],
  crType: '',
  total: 0,
  page: 1,
  pageSize: 5
})

const getCourseRecords = () => {
  getCourseRecordsByTeacherId({
    teacherId: props.teacherData.id,
    start: searchForm.date && searchForm.date.length > 0 ? searchForm.date[0] : null,
    end: searchForm.date && searchForm.date.length > 0 ? searchForm.date[1].replace('00:00:00', '23:59:59') : null,
    page: searchForm.page,
    pageSize: searchForm.pageSize
    }).then(res => {
      courseRecords.value = res.data.list
      searchForm.total = res.data.total
    })
}

const resetSearchForm = () => {
  searchForm.date = []
  searchForm.total = 0
  searchForm.page = 1
  searchForm.pageSize = 5
  getCourseRecords()
}

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  searchForm.page = 1
  searchForm.pageSize = val
  getCourseRecords()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  searchForm.page = val
  getCourseRecords()
}

const props = defineProps({
  modelValue: Boolean,
  teacherData: Object,
  instrumentsOptions: Array,
})

const emit = defineEmits(['update:modelValue'])

const visible = ref(false)
const activeName = ref('basic')


// 监听显示状态
watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) 
    getCourseRecords()
  else{
    searchForm.date = []
    searchForm.total = 0
    searchForm.page = 1
    searchForm.pageSize = 5
    activeName.value = 'basic'
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

// 格式化乐器名称
const formatInstrument = (instrument) => {
  const found = props.instrumentsOptions.find(item => item.id === instrument)
  return found ? found.icName : instrument
}
</script>

<style scoped>
.teacher-detail-dialog {
  --el-dialog-border-radius: 12px;
}

.teacher-detail-container {
  padding: 20px;
}

.basic-info {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ebeef5;
}

.teacher-avatar {
  border: 3px solid #f0f7ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.teacher-avatar:hover {
  transform: scale(1.05);
}

.name-and-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.name-and-status h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.status-tag {
  width: fit-content;
  font-size: 14px;
  font-weight: 500;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-descriptions {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.description-label) {
  width: 100px;
  background-color: #f5f7fa !important;
  font-weight: 500;
  color: #606266;
}

.description-value {
  color: #303133;
}

.instrument-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.instrument-tag {
  font-weight: 500;
  margin-right: 6px;
}

.teacher-description {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
}

.teacher-description h3 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
}

.description-content {
  color: #606266;
  line-height: 1.6;
}
</style>
